<template>
	<widget-root :styles="styles" v-if="content.data.length">
		<view class="banner" :style="{
		'height': banheig,
        'border-radius': bannelRadius,
        'padding-top': `${(styleHeight / 750) * 100}%`,
      }">
			<swiper class="swiper" @change="swiperChange" :autoplay="true">
				<swiper-item v-for="(item, index) in content.data" :key="index" :style="{position:'relative'}">
					<block v-if="item.link !=undefined && item.link.path == 'customer_service'">
						<u-button :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium">
							<u-image mode="aspectFill" :style="{width:'100%',}" :height="styles.height+'rpx'"
								:border-radius="$px2rpx(styles.border_radius)" :src="$getImageUri(item.url)">
							</u-image>
						</u-button>
					</block>
					<u-image mode="aspectFill" width="100%" height="100%" v-else @tap="navigate(item)"
						:border-radius="$px2rpx(styles.border_radius)" :src="$getImageUri(item.url)">
					</u-image>
				</swiper-item>
			</swiper>
			<indicator :current="current" :length="content.data.length" :type="styles.indicator_style"
				:align="styles.indicator_align" :color="styles.indicator_color" />
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	import {
		getRect
	} from "@/utils/tools";
	export default {
		props: {
			content: {
				type: [Object, Array],
			},
			styles: {
				type: [Object, Array],
			},
			banheig: {
				type: String,
				default: '',
			},
			
		},
		data() {
			return {
				current: 0,
			};
		},
		methods: {
			swiperChange({
				detail
			}) {
				this.current = detail.current;
			},
			navigate(item) {
				const {
					path,
					params,
					type
				} = item.link
				if (type == 'call_phone') {
					uni.makePhoneCall({
						phoneNumber: params.phone
					})
				} else if (type == 'send_msg') {
					uni.sendSms({
						phoneNumber: params.phone
					})
				} else {
					if (!path) return;
					this.$Router.push({
						path: path,
						query: params,
					});
				}
			},
		},
		computed: {
			styleHeight() {
				return this.styles.height == undefined || this.styles.height == 0 ?
					340 :
					this.styles.height;
			},
			bannelRadius() {
				return this.styles.left_top_border_radius == undefined ? this.$px2rpx(this.styles.border_radius) + 'rpx' :
					`${this.$px2rpx(this.styles.left_top_border_radius)}rpx ${this.$px2rpx(this.styles.right_top_border_radius)}rpx ${this.$px2rpx(this.styles.right_bottom_border_radius)}rpx ${this.$px2rpx(this.styles.left_bottom_border_radius)}rpx`
			}
		},
		watch: {},
	};
</script>

<style lang="scss" scoped>
	.banner {
		height: 0;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		transform: translateY(0);

		.swiper {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>